<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入jstl -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="header.jsp"%>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="demoTable">
	  搜索ID：
	  <div class="layui-inline">
	    <input class="layui-input" name="name" id="name" autocomplete="off">
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="test" lay-filter="tableFilter"></table>
	
	<script type="text/html" id="topToolbar">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    		<button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
  		</div>
	</script>
 
	<script type="text/html" id="rightToolbar">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script>
		layui.use('table', function(){
		  var table = layui.table;
		  table.render({
		    elem: '#test'
		    ,url:'${path}/user?method=selectLayuiByPage'
		    ,toolbar: '#topToolbar' //开启头部工具栏，并为其绑定左侧模板
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'userId', title: 'ID', sort: true}
		      ,{field:'userName', title: '用户名'}
		      ,{field:'userAge', title: '年龄'}
		      ,{field:'userEmail', title: '邮箱'}
		      ,{field:'departmentName', title: '部门名称'}
		      ,{field:'roleName', title: '角色名称'}
		      ,{fixed: 'right', title:'操作', toolbar: '#rightToolbar'}
		    ]]
		    ,page:true
		    ,id: 'tableReload'
		  });
		  
		  //头工具栏事件
		  table.on('toolbar(tableFilter)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'deleteAll':
		    	// 以数组形式返回选中行的数据[{},{}]
		        var data = checkStatus.data;
		    	var ids = [];
		    	$(data).each(function() {
		    		ids.push(this.id);
		    	});
		    	layer.confirm('您确定要删除么？', function(){
		    		$.post(
			    		'${path}/user?method=deleteAll',
			    		{'ids':ids},
			    		function(jsonResult) {
			    			console.log(jsonResult);
			         		if(jsonResult.code == 0) {
			         			mylayer.okMsg(jsonResult.msg);
								
								table.reload('tableReload');
								layer.close(index);
			         		}
			    		},
			    		'json'
				    );
		    	});
		    	
		      break;
		      case 'insert':
		    	  layer.open({
		    		  type : 2,
		    		  area : ['500px', '450px'],
		    		  content : '${path}/user?method=getUserInsertPage'
		    	  });
		      break;
		      //自定义头工具栏右侧图标 - 提示
		      case 'LAYTABLE_TIPS':
		        layer.alert('这是工具栏右侧自定义的一个图标按钮');
		      break;
		    };
		  });
		  
		 //监听行工具事件
		  table.on('tool(tableFilter)', function(obj){
			// data代表当前点击的这一行的数据，就是User对象
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		         $.post(
		         	'${path}/user?method=deleteById',
		         	{'id' : data.userId},
		         	function(jsonResult) {
		         		console.log(jsonResult);
		         		if(jsonResult.code == 0) {
		         			mylayer.okMsg(jsonResult.msg);
							
							table.reload('tableReload');
							layer.close(index);
		         		}
		         	},
		         	'json'
		         );
		      });
		    } else if(obj.event === 'edit'){
		    	layer.open({
		    		  type : 2,
		    		  area : ['500px', '450px'],
		    		  content : '${path}/user?method=getUserUpdatePage&id=' +  data.userId
		    	  });
		    }
		  });
		 
		 
		  var $ = layui.$, active = {
		    reload: function(){
		      var demoReload = $('#demoReload');
		      
		      //执行重载
		      // /user?method=selectLayuiByPage&page=1&limit=10&name=张三
		      table.reload('tableReload', {
		        page: {
		          curr: 1 //重新从第 1 页开始
		        }
		        ,where: {
		           name:$('#name').val()
		        }
		      }, 'data');
		    }
		  };
		  
		  $('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		  });
		 
		});
</script>
	
</body>
</html>